<script setup lang="ts">
import {ref,reactive} from "vue";
import SwitchButton from './component/switch.vue'
import CreateButtons from "@/views/Student/note/Home/component/create.vue";
import Favorites from "@/views/Student/note/Home/component/favorites.vue";
import NoteAreaBox from "@/views/Student/note/component/note-area-box.vue";
import CardNote from "@/components/communal/Card/card-note.vue";
import {type IListCard, useListCardData} from "@/views/Student/learn/Curriculum/component/data";
import {useRequest} from "vue-hooks-plus";
import {postKnowledgeBaseSelectGroupById} from "@/apis/student";

let tabKey = ref<boolean>(true)
let title = ref<string>('')
const tabChange = ():void => {
  tabKey.value = !tabKey.value
}
let id = ref<number|null>(null)
let noteDataList = ref<any>([])
const { run,loading } = useRequest(()=>postKnowledgeBaseSelectGroupById({
  pageNum: pagination.pageNum,
  pageSize: pagination.pageSize,
  id:id.value
}),{
  manual: true, // 手动触发
  onSuccess:((res)=>{
    console.log(res.data,list)
    noteDataList.value = res.data.list
  })
})
const handleTabChange = (param?:any) => {
  id.value = param.id
  run()
  tabChange()
}
const pagination = reactive<IPageInfo>({
  onChange: (page: number,pageSize) => {
    pagination.pageNum = page
    pagination.pageSize = pageSize
    run()
  },
  pageNum:1,
  pageSize: 10,
  total: 0,
  hideOnSinglePage: true,
  pageSizeOptions:['10', '20', '30', '40']
});
let listCardData:Array<IListCard> = useListCardData()
</script>

<template>
  <a-card :bordered="false" class="card" v-show="tabKey">
    <NoteAreaBox title="开始 Start">
      <CreateButtons></CreateButtons>
    </NoteAreaBox>
    <a-divider></a-divider>
    <NoteAreaBox title="笔记分组 Note grouping">
      <Favorites @change="handleTabChange"></Favorites>
    </NoteAreaBox>
    <a-divider></a-divider>
    <NoteAreaBox title="文档 document">
      <SwitchButton></SwitchButton>
    </NoteAreaBox>
  </a-card>

  <a-card :bordered="false" class="card" v-show="!tabKey">
    <a-page-header
        :title="title"
        sub-title="This is a subtitle"
        @back="tabChange"
    />
    <a-list :grid="{ gutter: 16, column: 6 }" :data-source="noteDataList" :pagination="pagination">
      <template #renderItem="{ item }">
        <a-list-item>
          <card-note width="120px" height="181px" :title="item.meta.title" :blurb="item.meta.description">
          </card-note>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<style scoped lang="scss">
.card{
  height: 100%;
  padding: 0 2rem;
}
</style>
